<template>
  <div class="toolbar-box">
    <div class="upload-box" style="position:relative;display: inline-block;">
      <!-- <el-button class="upload-btn toolbar-btn" icon="el-icon-upload2" title="上传" @click="upload">上传</el-button> -->
      <!-- <input
        title
        multiple
        accept="*/*"
        type="file"
        ref="html5uploader"
        :webkitdirectory="uploadType=='dir'?true:false"
        style="position:absolute;opacity:0;top:0;left:0;width:100%;height:100%;"
      />-->
      <el-button
        class="upload-btn toolbar-btn"
        icon="el-icon-upload2"
        title="上传"
        @click.native="upload('file')"
      >上传</el-button>
      <!-- <el-dropdown v-else placement="bottom">
        <el-button
          class="upload-btn toolbar-btn"
          icon="el-icon-upload2"
          title="上传"
          @click.native="upload('file')"
        >上传</el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="upload('file')">上传文件</el-dropdown-item>
          <el-dropdown-item @click.native="upload('dir')">上传文件夹</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>-->
    </div>
    <template v-if="!isClassify">
      <el-button
        class="newFolder-btn group-btn toolbar-btn"
        icon="el-icon-folder-add"
        title="新建文件夹"
        @click="createFolder"
      >新建文件夹</el-button>
    </template>
    <template v-if="checkedNum>0">
      <el-button-group class="toolbar-btn-group">
        <el-button
          class="group-btn toolbar-btn"
          icon="el-icon-share"
          title="分享"
          @click.native="share"
        >分享</el-button>
        <el-button class="group-btn toolbar-btn" icon="el-icon-download" title="下载">下载</el-button>
        <el-button
          class="group-btn toolbar-btn"
          icon="el-icon-delete"
          title="删除"
          @click="delFile"
        >删除</el-button>
        <el-dropdown placement="bottom" v-if="collapsed">
          <el-button class="group-btn toolbar-btn more-btn" icon="el-icon-more" title="更多">更多</el-button>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="checkedNum>1" @click.native="reName">重命名</el-dropdown-item>
            <el-dropdown-item @click.native="copy">复制到</el-dropdown-item>
            <el-dropdown-item @click.native="move">移动到</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <template v-else>
          <el-button class="group-btn toolbar-btn" title="重命名" @click.native="reName">重命名</el-button>
          <el-button class="group-btn toolbar-btn" title="复制到" @click.native="copy">复制到</el-button>
          <el-button class="group-btn toolbar-btn" title="移动到" @click.native="move">移动到</el-button>
        </template>
      </el-button-group>
    </template>

    <div class="toolbar-right">
      <el-input class="search-box" placeholder="搜索您的文件" size="medium" v-model="key" clearable>
        <el-button slot="append" icon="el-icon-search" @click="searchFile"></el-button>
      </el-input>

      <el-dropdown placement="bottom">
        <i class="el-icon-s-fold solt-icon fold-icon" title="排序"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            class="fold-item"
            v-for="(item,index) in folds"
            :key="index"
            :icon="sort_active===item.attr?'el-icon-check':''"
            :style="{paddingLeft:sort_active===item.attr?'10px':'27px'}"
            @click.native="toggleSort(item.attr)"
          >{{item.title}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <i class="el-icon-menu solt-icon menu-icon" title="切换视图"></i>
    </div>
  </div>
</template>

<script>
import Bus from "@/upload/bus.js";
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      uploadType: "file", //上传文件类型
      key: "",
      checkedNum: 0,

      folds: [
        {
          title: "文件名",
          attr: "name"
        },
        {
          title: "大小",
          attr: "size"
        },
        {
          title: "修改日期",
          attr: "utime"
        }
      ],
      fullWidth: document.documentElement.clientWidth
    };
  },

  computed: {
    isSupportDir() {
      //浏览器是否支持webkitdirectory 不支持不会显示下拉栏
      let input = document.createElement("input");
      return input.webkitdirectory ? true : false;
    },
    ...mapGetters({ isClassify: "getIsClassify" }),
    ...mapState({
      addingFolder: state => state.files.adding_folder,
      sort_active: state => state.files.sort.attr,
      search: state => state.files.search
    }),
    collapsed() {
      return this.fullWidth <= 1150 ? true : false;
    }
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.key = this.search;
    Bus.$on("onToggleToolBar", num => {
      this.checkedNum = num;
    });
  },
  methods: {
    ...mapMutations(["toggleFolder", "toggleSearch", "saveSearch", "saveSort"]), //引入vuex辅助函数，混入methods 同名方法
    upload(type) {
      if (this.addingFolder) return; //新建状态无法执行
      Bus.$emit("openUploader", {
        //触发上传文件
        type
      });
    },
    createFolder() {
      if (this.addingFolder) return;
      this.toggleFolder(true); //开启新建状态
      Bus.$emit("onCreateFolder");
    },
    share() {
      console.log(123)
      Bus.$emit("onShareShow"); //触发分享文件
    },
    delFile() {
      Bus.$emit("onDelFile"); //触发删除文件
    },
    reName() {
      Bus.$emit("onReName"); //触发重命名
    },
    copy() {
      Bus.$emit("onMoveShow", { type: "copy" }); //触发移动框显示
    },
    move() {
      Bus.$emit("onMoveShow", { type: "move" }); //触发移动框显示
    },
    searchFile() {
      let key = this.key.trim();
      if (key.length == 0) {
        this.$message.warning("搜索的内容不能为空");
        return;
      }
      this.saveSearch(this.key);
      Bus.$emit("onSearch");
      this.$emit("searchFile", this.key); //触发搜索文件
    },
    toggleSort(attr) {
      let newSort = {
        attr,
        order: -1
      }; //调转顺序
      this.saveSort(newSort);
    },
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth;
    }
  },
  destroyed() {
    Bus.$off("onToggleToolBar");
  }
};
</script>

<style lang="scss" scoped>
.toolbar-box {
  padding: 10px;
  position: relative;

  .toolbar-btn {
    padding: 8px 12px;
  }
  .toolbar-btn-group,
  .newFolder-btn {
    vertical-align: top;
    margin-left: 10px;
  }
  .upload-btn {
    color: #fff;
    border-color: $theme-color;
    background-color: $theme-color;
  }
  .more-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .group-btn {
    color: $theme-color;
    border-color: #cadcb9;
    background-color: #fff;
  }
  .toolbar-right {
    position: absolute;
    right: 10px;
    top: 10px;
    height: 34px;
    .search-box {
      width: 198px;
      border-radius: 17px;
      overflow: hidden;
    }
    .fold-icon,
    .menu-icon {
      font-size: 20px;
      vertical-align: text-bottom;
      color: #687176;
      margin-left: 10px;
      cursor: pointer;
    }
    .fold-icon:hover,
    .menu-icon:hover {
      opacity: 0.8;
    }
  }
}
</style>
<style lang="scss">
.toolbar-box {
  [class*=" el-icon-"],
  [class^="el-icon-"] {
    vertical-align: text-top;
    font-size: 16px;
    font-weight: 700;
  }
  span {
    line-height: 16px;
  }
  .search-box {
    .el-input__inner {
      height: 34px;
      line-height: 34px;
      border: 0;
      background-color: #f1f2f4;
      font-size: 12px;
    }
    .el-input-group__append {
      border: 0;
      background-color: #f1f2f4;
      padding: 0 15px;
      .el-button {
        padding: 9px 0;
      }
    }
  }
}
.el-dropdown-menu.el-popper {
  padding: 0;
}
.el-dropdown-menu__item {
  color: $theme-color !important;
  font-size: 12px;
  padding: 0 10px;
}
.el-dropdown-menu__item.is-disabled {
  color: #bbb !important;
}
</style>